<template>
	<view class="login-box">
    <img class="login-logo" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/10011693836581_.pic.jpg" alt="">
    <view class="login-title">城市车位，你的车位选择</view>
   <view class="input" v-if="!is_bind">
      <view class="input-label">邀请码：</view>
      <input type="text" v-model="newCode" placeholder="如有邀请码,请输入">
    </view>
      <view @tap="clickBtn">
        <button style="color: #fff;
        background-color: #005ECD;
        border-radius: 100rpx;" class="login-btn" :class="{ 'pointer-none': !isChecked }" type="default"
          open-type="getPhoneNumber" @getphonenumber="loginByWeixinPhoneNumber1">手机号登录</button>
      </view>
      <view class="sign">
        <img v-if="isChecked" @tap="checkFn" class="sign-1" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/方形选中.svg"
          alt="">
        <img v-else @tap="checkFn" class="sign-1" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/方形未选中.svg" alt="">
        <view class="sign-2" @tap="checkFn">勾选代表您已阅读并同意</view>
        <view @tap="goXieyi('64eda8d7189f866d65a46911')" class="sign-3">《用户服务协议》 </view>、
        <view @tap="goXieyi('64eda8e086206658e9e15eb9')" class="sign-3">《隐私政策》</view>
      </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecked: false,
        newCode: '',
        is_bind: false, // 是否绑定过邀请人
			}
		},
    props: {
      encryptedKey: {
        default: ''
      },
      inviteCode: {
        default: ''
      }
    },
    watch: {
      inviteCode(n ,o) {
        if (n) {
          this.newCode = n
        }
      }
    },
		methods: {
			clickBtn() {
			  if (!this.isChecked) {
			    uni.showToast({
			      title: '请阅读并勾选相关协议',
			      icon: 'none'
			    });
			  }
			},
			checkFn() {
			  this.isChecked = !this.isChecked
			},
			goXieyi(id) {
			  uni.navigateTo({
			    url: '/pages/xieyi/xieyi?id=' + id
			  })
			},
      // 使用微信绑定的手机号登录/注册（新方式）
      loginByWeixinPhoneNumber1(e){
      	let that = this;
      	let { code } = e.detail;
      	if (!code) {
      		return false;
      	}
      	vk.userCenter.loginByWeixinPhoneNumber({
      		data: {
      			code,
      			encryptedKey : that.encryptedKey
      		},
      		success(data) {
      			console.log(data)
            vk.toast(data.msg,'none');
            let obj = {}
            if (!data.userInfo.username) {
              obj.water_amount = 0
              obj.balance = 0
              obj.water_amount_back = 0
              obj.username = data.userInfo.mobile
              obj.avatar = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
              that.updateCode(obj, true)
            } else {
              that.updateCode(obj, false)
            }
          }
      	});
      },
      updateCode(obj, flag) {
        let invite_code = this.newCode
        if (invite_code) {
          obj.invite_code = invite_code
        }
        if (flag) {
          // 第一次更新
          vk.callFunction({
            url: 'user/kh/updateUserPid',
            data: obj,
            success: () => {
              if (obj.invite_code) {
                uni.removeStorageSync('invite_code')
              }
              uni.$emit('loginSuccess')
            }
          })
        } else {
          if (obj.invite_code) {
            vk.callFunction({
              url: 'user/kh/updateUserPid',
              data: {
                invite_code
              },
              success: () => {
                if (obj.invite_code) {
                  uni.removeStorageSync('invite_code')
                }
                uni.$emit('loginSuccess')
              }
            })
          } else {
             uni.$emit('loginSuccess')
          }
        }
      }
		}
	}
</script>

<style lang="scss">
  .input {
    width: 660rpx;
    height: 46rpx;
    display: flex;
    align-items: center;
    padding: 10rpx;
    border: 1px solid #d9d9d9;
    border-radius: 100rpx;
    margin-top: 40rpx;
    &-txt {
      font-family: PingFang SC;
      font-size: 28rpx;
      font-style: normal;
      font-weight: bold;
      flex: 1;
    }
    &-label {
      font-family: PingFang SC;
      font-size: 28rpx;
      font-style: normal;
      padding-left: 20rpx;
      width: 200rpx;
    }
  }
  .pointer-none {
  	pointer-events: none;
  }
  .login {
    &-box {
      background-color: #fff;
      padding: 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 500rpx;
      justify-content: space-evenly;
    }
    &-logo {
      width: 100rpx;
      height: 100rpx;
    }
    &-title {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }
    &-btn {
      width: 660rpx;
      height: 70rpx;
      background-color: #c1b7b7;
      border-radius: 4rpx;
      text-align: center;
      line-height: 70rpx;
      font-family: PingFang SC;
      font-size: 30rpx;
      font-style: normal;
      font-weight: 500;
      color: #525252;
    }
  }
  
.sign {
	display: flex;
	align-items: center;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;

	&-1 {
		width: 32rpx;
		height: 32rpx;
		margin-right: 4rpx;

		&-checked {
			background: #005ECD;
		}
	}

	&-3 {
		color: #005ECD;
	}
}
</style>
